<template>
            <div class="container">
                <div class="handle-box">
                    <el-row>&nbsp;&nbsp;&nbsp;
                        <el-col :span="3">
                            <el-input v-model="renew.retail_licence_code" placeholder="请手动输入店铺号" ></el-input>
                        </el-col>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-col :span="3">
                            <el-select v-model="renew.feature1"   clearable filterable placeholder="请选择特征1">
                                <el-option key="1" label="负责人籍贯" value="负责人籍贯"></el-option>
                                <el-option key="2" label="经营业态" value="经营业态"></el-option>
                                <el-option key="3" label="连锁户" value="连锁户"></el-option>
                                <el-option key="4" label="新办证户" value="新办证户"></el-option>
                                <el-option key="5" label="实际经营人与持证人不符" value="实际经营人与持证人不符"></el-option>
                                <el-option key="6" label="责令停业户" value="责令停业户"></el-option>
                                <el-option key="7" label="申请停业户" value="申请停业户"></el-option>
                                <el-option key="8" label="停业到期户" value="停业到期户"></el-option>
                                <el-option key="9" label="许可证状态" value="许可证状态"></el-option>
                                <el-option key="10" label="场地权属" value="场地权属"></el-option>
                                <el-option key="11" label="企业经济类型" value="企业经济类型"></el-option>
                                <el-option key="12" label="许可证到期提醒" value="许可证到期提醒"></el-option>
                                <el-option key="13" label="经营卷烟面积" value="经营卷烟面积"></el-option>
                                <el-option key="14" label="经营人籍贯" value="经营人籍贯"></el-option>
                                <el-option key="15" label="涉案次数" value="涉案次数"></el-option>
                                <el-option key="16" label="涉案卷烟数量" value="涉案卷烟数量"></el-option>
                                <el-option key="17" label="地区类别" value="地区类别"></el-option>
                            </el-select>
                        </el-col>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-col :span="3">
                            <el-select v-model="renew.feature2" clearable placeholder="请选择特征2" >
                                <el-option key="1" label="负责人籍贯" value="负责人籍贯"></el-option>
                                <el-option key="2" label="经营业态" value="经营业态"></el-option>
                                <el-option key="3" label="连锁户" value="连锁户"></el-option>
                                <el-option key="4" label="新办证户" value="新办证户"></el-option>
                                <el-option key="5" label="实际经营人与持证人不符" value="实际经营人与持证人不符"></el-option>
                                <el-option key="6" label="责令停业户" value="责令停业户"></el-option>
                                <el-option key="7" label="申请停业户" value="申请停业户"></el-option>
                                <el-option key="8" label="停业到期户" value="停业到期户"></el-option>
                                <el-option key="9" label="许可证状态" value="许可证状态"></el-option>
                                <el-option key="10" label="场地权属" value="场地权属"></el-option>
                                <el-option key="11" label="企业经济类型" value="企业经济类型"></el-option>
                                <el-option key="12" label="许可证到期提醒" value="许可证到期提醒"></el-option>
                                <el-option key="13" label="经营卷烟面积" value="经营卷烟面积"></el-option>
                                <el-option key="14" label="经营人籍贯" value="经营人籍贯"></el-option>
                                <el-option key="15" label="涉案次数" value="涉案次数"></el-option>
                                <el-option key="16" label="涉案卷烟数量" value="涉案卷烟数量"></el-option>
                                <el-option key="17" label="地区类别" value="地区类别"></el-option>
                            </el-select>
                        </el-col>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-col :span="3">
                            <el-select v-model="renew.feature3"  clearable placeholder="请选择特征3" >
                                <el-option key="1" label="负责人籍贯" value="负责人籍贯"></el-option>
                                <el-option key="2" label="经营业态" value="经营业态"></el-option>
                                <el-option key="3" label="连锁户" value="连锁户"></el-option>
                                <el-option key="4" label="新办证户" value="新办证户"></el-option>
                                <el-option key="5" label="实际经营人与持证人不符" value="实际经营人与持证人不符"></el-option>
                                <el-option key="6" label="责令停业户" value="责令停业户"></el-option>
                                <el-option key="7" label="申请停业户" value="申请停业户"></el-option>
                                <el-option key="8" label="停业到期户" value="停业到期户"></el-option>
                                <el-option key="9" label="许可证状态" value="许可证状态"></el-option>
                                <el-option key="10" label="场地权属" value="场地权属"></el-option>
                                <el-option key="11" label="企业经济类型" value="企业经济类型"></el-option>
                                <el-option key="12" label="许可证到期提醒" value="许可证到期提醒"></el-option>
                                <el-option key="13" label="经营卷烟面积" value="经营卷烟面积"></el-option>
                                <el-option key="14" label="经营人籍贯" value="经营人籍贯"></el-option>
                                <el-option key="15" label="涉案次数" value="涉案次数"></el-option>
                                <el-option key="16" label="涉案卷烟数量" value="涉案卷烟数量"></el-option>
                                <el-option key="17" label="地区类别" value="地区类别"></el-option>
                            </el-select>
                        </el-col>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-col :span="3">
                            <el-select v-model="renew.feature4" clearable placeholder="请选择特征4" >
                                <el-option key="1" label="负责人籍贯" value="负责人籍贯"></el-option>
                                <el-option key="2" label="经营业态" value="经营业态"></el-option>
                                <el-option key="3" label="连锁户" value="连锁户"></el-option>
                                <el-option key="4" label="新办证户" value="新办证户"></el-option>
                                <el-option key="5" label="实际经营人与持证人不符" value="实际经营人与持证人不符"></el-option>
                                <el-option key="6" label="责令停业户" value="责令停业户"></el-option>
                                <el-option key="7" label="申请停业户" value="申请停业户"></el-option>
                                <el-option key="8" label="停业到期户" value="停业到期户"></el-option>
                                <el-option key="9" label="许可证状态" value="许可证状态"></el-option>
                                <el-option key="10" label="场地权属" value="场地权属"></el-option>
                                <el-option key="11" label="企业经济类型" value="企业经济类型"></el-option>
                                <el-option key="12" label="许可证到期提醒" value="许可证到期提醒"></el-option>
                                <el-option key="13" label="经营卷烟面积" value="经营卷烟面积"></el-option>
                                <el-option key="14" label="经营人籍贯" value="经营人籍贯"></el-option>
                                <el-option key="15" label="涉案次数" value="涉案次数"></el-option>
                                <el-option key="16" label="涉案卷烟数量" value="涉案卷烟数量"></el-option>
                                <el-option key="17" label="地区类别" value="地区类别"></el-option>
                            </el-select>
                        </el-col>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-col :span="3">
                            <el-select v-model="renew.feature5" clearable placeholder="请选择特征5" >
                                <el-option key="1" label="负责人籍贯" value="负责人籍贯"></el-option>
                                <el-option key="2" label="经营业态" value="经营业态"></el-option>
                                <el-option key="3" label="连锁户" value="连锁户"></el-option>
                                <el-option key="4" label="新办证户" value="新办证户"></el-option>
                                <el-option key="5" label="实际经营人与持证人不符" value="实际经营人与持证人不符"></el-option>
                                <el-option key="6" label="责令停业户" value="责令停业户"></el-option>
                                <el-option key="7" label="申请停业户" value="申请停业户"></el-option>
                                <el-option key="8" label="停业到期户" value="停业到期户"></el-option>
                                <el-option key="9" label="许可证状态" value="许可证状态"></el-option>
                                <el-option key="10" label="场地权属" value="场地权属"></el-option>
                                <el-option key="11" label="企业经济类型" value="企业经济类型"></el-option>
                                <el-option key="12" label="许可证到期提醒" value="许可证到期提醒"></el-option>
                                <el-option key="13" label="经营卷烟面积" value="经营卷烟面积"></el-option>
                                <el-option key="14" label="经营人籍贯" value="经营人籍贯"></el-option>
                                <el-option key="15" label="涉案次数" value="涉案次数"></el-option>
                                <el-option key="16" label="涉案卷烟数量" value="涉案卷烟数量"></el-option>
                                <el-option key="17" label="地区类别" value="地区类别"></el-option>
                            </el-select>
                        </el-col>&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-col :span="3">
                            <el-button type="primary" @click="renew_message" >更新</el-button>
                        </el-col>
                    </el-row>
                </div>
                <div class="chart-wrapper" style="width: 95%; height: 500px; padding:10px">
                    <div id="chartContainer" style="width: 95%; height: 500px; padding:10px"></div>
                </div>
            </div>



</template>

<script >
import * as echarts from 'echarts';
import treeData from './tree.json';
import {
    send_feature
} from '../api/index';
export default {
    data() {
        return {
            treeData: treeData,
            loading: false,
            renew:{
                retail_licence_code:'',
                feature1:'',
                feature2:'',
                feature3:'',
                feature4:'',
                feature5:'',
            }
        };
    },
    mounted() {
        this.renderChart();
    },
    methods: {
        renew_message(){
            if(this.renew.retail_licence_code.length==0){
                alert("请输入店铺许可证号")
            } else if (this.renew.feature1.length==0){
                alert("请选择特征1")
            }else if (this.renew.feature2.length==0){
                alert("请选择特征2")
            }else if (this.renew.feature3.length==0){
                alert("请选择特征3")
            }else if (this.renew.feature4.length==0){
                alert("请选择特征4")
            }else if (this.renew.feature5.length==0){
                alert("请选择特征5")
            }else if(this.renew.feature1==this.renew.feature2||this.renew.feature1==this.renew.feature3||this.renew.feature1==this.renew.feature4||this.renew.feature1==this.renew.feature5
                ||this.renew.feature2==this.renew.feature3||this.renew.feature2==this.renew.feature4||this.renew.feature2==this.renew.feature5||this.renew.feature4==this.renew.feature4
                ||this.renew.feature3==this.renew.feature5||this.renew.feature4==this.renew.feature5){
                alert("请选择不同特征")
            }else{
                send_feature(this.renew.retail_licence_code,this.renew.feature1,this.renew.feature2,this.renew.feature3,this.renew.feature4,this.renew.feature5).then(res=>{
                    alert("true")
                })
            }

        },
        renderChart() {
            const myChart = echarts.init(document.getElementById('chartContainer'));
            myChart.showLoading();

            myChart.hideLoading();
            console.log(this.treeData)
            myChart.setOption({
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                series: [
                    {
                        type: 'tree',
                        data: [this.treeData],
                        left: '2%',
                        right: '2%',
                        top: '8%',
                        bottom: '20%',
                        symbol: 'emptyCircle',
                        orient: 'vertical',
                        expandAndCollapse: true,
                        label: {
                            position: 'top',
                            rotate: -90,
                            verticalAlign: 'middle',
                            align: 'right',
                            fontSize: 9
                        },
                        leaves: {
                            label: {
                                position: 'bottom',
                                rotate: -90,
                                verticalAlign: 'middle',
                                align: 'left'
                            }
                        },
                        animationDurationUpdate: 750
                    }
                ]
            });
        }

    }
};


</script>
<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }
    .handle-box button{
        background-color: #00a854;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }

    :deep(.avatar){
        width: 100px;
        height: 100px;
    }
    .blue {
        color: rgba(0, 118, 252, 0.79);
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 500px;
        height: 500px;
    }
    .dialog-footer button{
        background-color: #00a854;
        color:white;
    }


</style>